<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			table {
				width: 600px;
				border-collapse: collapse;
				margin: 0 auto;
				margin-bottom: 20px;

			}

			table caption {
				background: green;
				font-size: 30px;
				font-weight: 900;
			}

			.box2 {
				width: 600px;
				margin: 0 auto;
				border: 2px solid red;
				text-align: center;
				font-size: 24px;
			}

			.box2 p, h3 {
				margin-bottom: 15px;
			}

			table td {
				text-align: center;
				border: 1px solid grey;

			}


			.box2 #btn {
				font-size: 24px;
			}
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<table>
			<caption>学生系统</caption>
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>电话</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>10111</td>
					<td>张山</td>
					<td>108563</td>
					<td><input class='del' type="button" value="删除"></td>
				</tr>
			</tbody>
		</table>

		<div class="box2">
			<h3>新增学生</h3>
			<p>
				学号：<input id="stunum" type="number">
			</p>
			<p>
				姓名：<input id="name" type="text">
			</p>
			<p>
				电话：<input id="tel" type="number">
			</p>
			<p>
				<input id='btn' type="button" value="新增">
			</p>
		</div>

		<script type="text/javascript">
			$(function() {
				$("#btn").on("click", function() {
					var stunum = $("#stunum").val();
					var name = $("#name").val();
					var tel = $("#tel").val();
					var tmp = "<tr><td>" + stunum + "</td>" +
						"<td>" + name + "</td>" +
						"<td>" + tel + "</td>" +
						"<td>" + "<input class='del' type='button' value='删除'/>" + "</td>" +
						"</tr>"
					$("tbody").append($(tmp));

					$(".box2 #stunum").val("");
					$(".box2 #name").val("");
					$(".box2 #tel").val("");
				});

				$("tbody").on("click", ".del", function() {
					// var ok=confirm("确定删除学号:"+$(this).parent().siblings().eq(0).text());

					// if(true)
					$(this).parent().parent().remove();
				});


			});
		</script>
	</body>
</html>
